<template>
  <!-- 采购明细统计表 -->
  <div class="pages procurement">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商户:" label-width="100px">
                <el-input
                  class="input"
                  :disabled="true"
                  clearable
                  v-model="companyName"
                  size="small"
                  placeholder="输入商户编号/名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商:" label-width="100px">
                <!-- <el-input class="input"  clearable v-model="selectdata.supplierId" size="small" placeholder="输入客户编号/名称"></el-input> -->
                <el-select
                  size="small"
                  filterable
                  style="width:190px"
                  v-model="selectdata.supplierId"
                  placeholder="请先选择供应商名称"
                >
                  <el-option
                    v-for="(item,index) in selectBaseShopPageLists"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label label-width="10px">
                <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
              </el-form-item>
              <el-form-item label label-width="10px">
                <el-button
                  type="primary"
                  v-if="setRole('导出')"
                  size="mini"
                  class="Button"
                  @click="download"
                >导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="开始时间:" label-width="100px" class="billdata">
                <el-date-picker
                  class="delete"
                  style="width:190px"
                  value-format="yyyy-MM-dd"
                  size="small"
                  v-model="selectdata.startDate"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束时间:" label-width="100px" class="billdata">
                <el-date-picker
                  class="delete"
                  style="width:190px"
                  value-format="yyyy-MM-dd"
                  size="small"
                  v-model="selectdata.endDate"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品条码:" label-width="100px">
                <el-input
                  class="input"
                  clearable
                  v-model="selectdata.barCode"
                  size="small"
                  placeholder="输入商品条码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品货号:" label-width="100px">
                <el-input
                  class="input"
                  clearable
                  v-model="selectdata.goodsCode"
                  size="small"
                  placeholder="输入商品货号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品分类:" label-width="100px">
                <el-cascader
                  size="small"
                  style="width:190px"
                  change-on-select
                  expand-trigger="hover"
                  :options="commodityCategoryfunList"
                  v-model="selectdata.primaryClassifyId"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-col :span="6"> 
                <el-form-item label="商品批次:" label-width="100px">
                   <el-input class="input" clearable v-model="selectdata.goodsBatchNumber" size="small" placeholder="输入商品批次"></el-input>
                </el-form-item>
            </el-col>-->
            <el-col :span="6">
              <el-form-item label="商品名称:" label-width="100px">
                <el-input
                  class="input"
                  clearable
                  v-model="selectdata.goodsName"
                  size="small"
                  placeholder="输入商品名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品品牌:" label-width="100px">
                <el-select
                  size="small"
                  filterable
                  style="width:190px"
                  v-model="selectdata.brandId"
                  placeholder="请先选择商品品牌"
                >
                  <el-option
                    v-for="(item,index) in commodityBrandList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table
          :data="qutboundStatisticsList"
          stripe
          style="width: 100%"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column type="index" width="55" label="序号"></el-table-column>
          <el-table-column prop="shopName" label="商户名称" align="center" width="100"></el-table-column>
          <el-table-column prop="supplierName" label="供应商名称" align="center" width="150"></el-table-column>
          <el-table-column prop="barCode" label="商品条码" align="center"></el-table-column>
          <el-table-column prop="goodsCode" label="商品货号" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
          <!-- <el-table-column prop="goodsName" label="批次" align="center" width="100"></el-table-column> -->
          <el-table-column prop="goodsSpec" label="商品规格" align="center" width="150">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.goodsSpec" :key="index">
                <span v-if="item!=null">{{item.paramName}} :</span>
                <span v-if="item!=null">{{item.paramValue}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品分类" align="center" prop="primaryClassifyName" width="150"></el-table-column>
          <el-table-column prop="brand" label="商品品牌" align="center"></el-table-column>
          <el-table-column prop="unitName" label="单位" align="center"></el-table-column>
          <el-table-column prop="confirmNum" label="采购数量" align="center"></el-table-column>
          <el-table-column prop="sumGoodsAmount" label="采购金额" align="center"></el-table-column>
          <el-table-column prop="inTransit" label="在途数量" align="center"></el-table-column>
          <el-table-column prop="inVoucher" label="在单数量" align="center"></el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <!-- <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="selectdata.pageNum"
            :page-sizes="[5,10,20]"
            :page-size="selectdata.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import {
  purchaseDetailReport,
  getGoodsClassifyTreeList,
  getGoodsLabelListByShopId,
  exportPurchaseDetailReport,
  selectBaseShopPageList
} from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "power", "companyName"]),
  data() {
    return {
      selectdata: {
        shopId: "", //商户
        supplierId: "", // 供应商
        startDate: "", //开始时间
        endDate: "", //结束时间
        barrCode: "", //商品条码
        goodsCode: "", //商品货号
        primaryClassifyId: [""], //商品分类
        goodsBatchNumber: "", //商品批次
        goodsName: "", //商品名称
        brandId: "", //商品品牌
        pageNum: 1, // 页数
        pageSize: 10 // 每页几条
      },
      qutboundStatisticsList: [],
      //   分页
      pageSize: 10,
      pageNum: 1,
      totalItems: 0,
      currentPage: 1,
      qutgoingQuantity: "",
      commodityCategoryfunList: [], //商品品类数组
      commodityBrandList: [], //商品品牌数组
      shopPullDownList: [], //店铺下拉
      data: {},
      sumInVoucher: "",
      sumInTransit: "",
      sumNum: "",
      sumAmount: "",
      selectBaseShopPageLists: [] //供应商数组
    };
  },
  created() {},
  mounted() {
    this.commodityCategoryfun();
    this.commodityBrand();
    this.init();
    this.baseShopPageList();
  },
  methods: {
    init() {
      this.selectdata.shopId = this.merchantId;
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      if (this.selectdata.startDate == "" || this.selectdata.endDate == "") {
        this.$message({
          type: "error",
          message: "开始时间和结束时间必选"
        });
        return false;
      } else if (this.selectdata.startDate > this.selectdata.endDate) {
        this.$message({
          type: "error",
          message: "请确定开始日期小于或等于结束日期"
        });
      } else {
        let primaryClassifyId =
          this.selectdata.primaryClassifyId[
            this.selectdata.primaryClassifyId.length - 1
          ] || "";
        this.data = JSON.parse(JSON.stringify(this.selectdata));
        this.data.primaryClassifyId = primaryClassifyId;
        purchaseDetailReport(this.data).then(res => {
          this.totalItems = res.data.pageTotal;
          this.qutboundStatisticsList = res.data.list;
          this.sumNum = res.data.sumNum; // 采购总数量
          this.sumAmount = res.data.sumAmount; // 采购总金额
          this.sumInTransit = res.data.sumInTransit; // 在途总数量
          this.sumInVoucher = res.data.sumInVoucher; // 在单总金额
        });
      }
    },

    //跳页
    toPage() {
      this.selectdata.pageNum = 1;
      this.tableget();
    },
    // 搜索
    searchSelect() {
      this.selectdata.pageNum = 1;
      this.tableget();
    },
    handleSizeChange(val) {
      this.selectdata.pageSize = val;
      this.selectdata.pageNum = 1;
      this.tableget();
    },
    handleCurrentChange(val) {
      this.selectdata.pageNum = val;
      this.tableget();
    },
    // 商品品类
    commodityCategoryfun() {
      getGoodsClassifyTreeList().then(res => {
        let a = {
          value: "",
          label: "全部"
        };
        res.data.unshift(a);
        this.commodityCategoryfunList = res.data;
      });
    },
    // 商品品牌
    commodityBrand() {
      getGoodsLabelListByShopId({
        labelType: "0",
        shopId: this.merchantId
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.commodityBrandList = res.data.list;
      });
    },
    // 供应商列表
    baseShopPageList() {
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: "5"
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.selectBaseShopPageLists = res.data.list;
      });
    },
    // 导出
    download() {
      if (this.qutboundStatisticsList.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        exportPurchaseDetailReport(this.data).then(res => {
          let fileName = "采购明细统计表.xlsx";
          fileDownload(res, fileName);
        });
      }
    },
    // 合计下面那一列
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "汇总";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        sums[10] = this.sumNum;
        sums[11] = this.sumAmount;
        sums[12] = this.sumInTransit;
        sums[13] = this.sumInVoucher;
      });

      return sums;
    }
  }
};
</script>
<style scoped>
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
</style>
<style>
.procurement .delete .el-input__suffix {
  display: none;
}
.procurement .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.procurement .el-form-item {
  margin-bottom: 10px;
}
</style>



